<%--
  Created by IntelliJ IDEA.
  User: mastercgx
  Date: 2022/12/14
  Time: 下午2:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>结算页面</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/icons.css" />
    <link rel="stylesheet" href="css/table.css" />
    <link rel="stylesheet" href="css/orderSure.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript">

        // 总价变量
        let total = 0;

        function showAdres(sp){
            var pa = document.getElementById("newAdres");
            console.log(pa.style['display']);
            if(pa.style['display']=="none"){
                pa.style['display'] = 'block';
                sp.innerHTML = "取消新增地址";
            }else{
                pa.style['display'] = 'none';
                sp.innerHTML = "新增收货地址";
            }
        }

        $(function () {
            // 获得页面上的总金额进行计算，并且提交
            let totalList = $(".oneTotal");
            for(let i=0;i<totalList.length;i++){
                total += (totalList[i].value*1);
            }
            console.log(total);
            // 页面上显示赋值
            $(".totalMoney").html(total);
            // 隐藏的请求提交
            $("input[name='cost']").val(total);



            // 使用ajax添加新的数据，并局部刷新在网页上
            $("#submitBtn").on("click",function () {
                // 发送请求
                // 拿到参数
                let v1 = $("input[name='receiveName']").val();
                let v2 = $("input[name='phone']").val();
                let v3 = $("input[name='address']").val();

                // 发送请求的参数
                let address = {
                    receiveName: v1,
                    phone: v2,
                    address: v3
                };
                // 地址 参数 回调 类型
                $.post("addShopAddress",address,function (result) {
                    // 解析result，得到的是一个Array
                    let o = JSON.parse(result);
                    // 追加li标签

                    $(".adres").append('<li><input type="radio" name="shipAddId" value="'+o.id+'" style="width:50px">'+o.receivename+'&emsp;'+o.phone+'&emsp;'+o.address+'</li>');
                    // 修改提示内容
                    $("h3").html("请选择地址");
                    showAdres(this)
                },"text");
            });

        });

    </script>
</head>
<body>
<!--顶部-->
<div class="top">
    <div class="top_center">
        <ul class="top_bars">
            <li><a href="#">退出</a>|</li>
            <li><a href="#">我的订单<span class="jt_down"></span></a>|</li>
            <li><a href="#">关注杰普<span class="jt_down"></span></a>|</li>
            <li><a href="#">网站导航<span class="jt_down"></span></a></li>
        </ul>
    </div>
</div>
<!--头部-->
<div class="header3">
    <a href="#"><img src="images/logo.png"  class="oneImg"></a>


    <div class="h3_right">
        <img src="images/play_03.png" alt="">
    </div>

</div>
<p class="orderButtom">填写并核对订单信息</p>
<!--中间复杂部分-->
<div class="content">
    <div class="contentCenter">

        <form action="commitOrder" name="orderForm" method="post">

            <div class="centerTop">
                <b style="font-size:20px;">收货人信息</b>

                <b style="float: right;cursor: pointer;" onclick="showAdres(this);"
                   ondblclick="hideAdres(this);">新增收货地址</b>
                <ul class="adres">
                    <c:if test="${empty addressList}">
                        <h3 style="color: red">暂无地址，请去右侧添加</h3>
                    </c:if>
                    <c:if test="${not empty addressList}">
                        <h3 style="color: red">请选择地址</h3>
                        <c:if test="${addressList.size()!=0}">
                            <c:forEach items="${addressList}" var="address">
                                <li>
                                    <input type="radio" name="shipAddId" value="${address.id}" style="width:50px">
                                        ${address.receivename}&nbsp;&nbsp;&nbsp;${address.phone}&nbsp;&nbsp;&nbsp;${address.address}
                                </li>
                            </c:forEach>
                        </c:if>
                    </c:if>
                </ul>

                <p id="newAdres" style="font-size:15px;display: none;">
                        收件人姓名：<input type="text" name="receiveName"><br/><br/>
                        收件人地址：<input type="text" name="address"><br/><br/>
                        收件人电话：<input type="text" name="phone"><br/><br/>
<%--                        <input type="submit" value="确定"/>--%>
                        <input id="submitBtn" type="button" value="确定"/>
                </p>
            </div>



            <p class="singleP"><b>送货清单</b><span><a href="shopCart">返回修改购物车</a></span></p>
            <div class="bigDiv">
                <div class="twoDiv">
                    <b>商家：briup自营</b>
                    <c:forEach items="${bookVmList}" var="bv">
                        <input class="oneTotal" type="hidden" value="${bv.total}">
                        <ul class="oneUL">
                            <li>
                                <img src="${bv.image}" class="pic">
                                <p>${bv.name}&nbsp;${bv.author}&nbsp${bv.publisher}</p>
                                <p>¥&nbsp;<font>${bv.price}</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;×${bv.num}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有货</p>
                                <p><img src="images/sureLogo_14.png" alt=""><span>七天无理由退换货</span></p>
                            </li>
                            <li><pre>【赠品】  高级定制干花书签  随机  ×1</pre></li>
                        </ul>
                    </c:forEach>
                </div>
            </div>

            <div class="money">
                <span><font>${bookVmList.size()}</font>件商品，总商品金额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥<font class="totalMoney"></font></span>
                <span><img src="images/sureLogo_18.png" alt="">运费：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥0.00</span>
                <span>应付总额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥<font class="totalMoney"></font></span>
                <input type="hidden" name="cost" value="">
            </div>
            <div class="submit">
                <span>应付金额：¥<font class="totalMoney"></font><input type="image" src="images/21_03.png"></span>
            </div>
        </form>
    </div>

</div>
<!--脚部-->
<div class="footer3">
    <div class="f3_top">
        <div class="f3_center">
            <div class="ts1">品目繁多 愉悦购物</div>
            <div class="ts2">正品保障 天天低价</div>
            <div class="ts3">极速物流 特色定制</div>
            <div class="ts4">优质服务 以客为尊</div>
        </div>
    </div>
    <div class="f3_middle">
        <ul class="f3_center">
            <li class="f3_mi_li01">
                <h1>购物指南</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>配送方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>支付方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>售后服务</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>服务保障</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li06">
                <h1>客服中心</h1>
                <img src="images/qrcode_jprj.jpg" width="80px" height="80px">
                <p>抢红包、疑问咨询、优惠活动</p>
            </li>
        </ul>
    </div>
    <div class="f3_bottom">
        <p class="f3_links">
            <a href="#">关于我们</a>|
            <a href="#">联系我们</a>|
            <a href="#">友情链接</a>|
            <a href="#">供货商入驻</a>
        </p>
        <p>沪ICP备14033591号-8 杰普软件briup.com版权所有 杰普软件科技有限公司 </p>
        <img src="images/police.png">
    </div>
</div>
</body>
</html>
